﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Interface/Tips</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Tips">Tips</a></h4>
			<div class="menu-item"><a href="#"></a></div>
			<div class="menu-item"><a href="#Tips:show">show</a></div>
			<div class="menu-item"><a href="#Tips:hide">hide</a></div>
			<div class="menu-item"><a href="#Tips:setTitle">setTitle</a></div>
			<div class="menu-item"><a href="#Tips:setText">setText</a></div>
			<div class="menu-item"><a href="#Tips:attach">attach</a></div>
			<div class="menu-item"><a href="#Tips:detach">detach</a></div>
			<div class="menu-item"><a href="#Tips:HTML">HTML</a></div>
			<div class="menu-item"><a href="#Tips:Storage">Storage</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Tips"><a href="#Tips">Class: Tips</a></h1>

<p class="description">Display a tip on any element with a title and/or href.</p>

<h3>Credits</h3>

<ul>
<li>The idea behind Tips.js is based on <a href="http://web-graphics.com/mtarchive/001717.php">Bubble Tooltips</a> by <a href="http://web-graphics.com/">Alessandro Fulcitiniti</a>
</li>
</ul>
<h3>Note</h3>

<ul>
<li>Tips requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
</ul>
<h3>Implements</h3>

<ul>
<li>
<a href="../../core/Class/Class.Extras.html#Events">Events</a>, <a href="../../core/Class/Class.Extras.html#Options">Options</a>
</li>
</ul>
<h2><a href="#">Tips Method: constructor</a></h2>

<h3 class="description">Arguments</h3>

<ul>
<li>elements - (<em>mixed</em>: optional) A collection of elements, a string Selector, or an Element to apply the tooltips to.</li>
<li>options  - (<em>object</em>) An object to customize this Tips instance.</li>
</ul>
<h3>Options</h3>

<ul>
<li>showDelay - (<em>number</em>: defaults to 100) The delay the show event is fired.</li>
<li>hideDelay - (<em>number</em>: defaults to 100) The delay the hide hide is fired.</li>
<li>title - (<em>string|function</em>: defaults to title) The property of the element to be used for the tip-title. If this option is a function it will execute it on every element with it passed as the first argument. It uses the return value of this function as the tip-title</li>
<li>text - (<em>string|function</em>) Behaves the same as the <code>title</code> option but for tip-text. By default it either uses the <code>rel</code> or the <code>href</code> attribute as tip-text.</li>
<li>className - (<em>string</em>: defaults to <em>null</em>) The className your tooltip container will get. Useful for styling.

<ul>
<li>The tooltip element inside the tooltip container above will have 'tip' as classname.</li>
<li>The title will have as classname: tip-title</li>
<li>The text will have as classname: tip-text</li>
</ul>
</li>
<li>offset - (<em>object</em>: defaults to {x: 16, y: 16}) The distance of your tooltip from the mouse.</li>
<li>fixed - (<em>boolean</em>: defaults to <em>false</em>) If set to true, the tooltip will not follow the mouse.</li>
<li>windowPadding - (<em>object</em>; defaults to {x: 0, y: 0}) Allows you to reduce or expand the virtual size of the window for tip positioning. The tips will not be allowed to approach the edge of the window on any side based on this offset.</li>
<li>id - (<em>string</em>: defaults to <em>null</em>) Add an <code>id</code> to the tooltip element, required for WAI-ARIA support.</li>
<li>waiAria - (<em>boolean</em>: defaults to <em>true</em>) Requires the <code>id</code> option to be set. Enable <a href="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a> support. Adds aria-attributes to the tooltip.</li>
</ul>
<h3>Events</h3>

<ul>
<li>show - (<em>function</em>: defaults to <code>function(tip, hovered){ tip.setStyle('display', 'block'); }</code>) The default function for the show event, passes the tip element and the currently hovered element.</li>
<li>hide - (<em>function</em>: defaults to <code>function(tip, hovered){ tip.setStyle('display', 'none'); }</code>)  The default function for the hide event, passes the currently hovered element.</li>
<li>attach - (<em>function</em>) Fires when an element gets added to the tips instance. Passes the element as argument.</li>
<li>detach - (<em>function</em>) Fires when the event listeners get removed from an element. Passes the element as argument.</li>
</ul>
<h3>Example</h3>

<h4>HTML</h4>

<pre class="javascript">&lt;a href=<span class="st0">"http://mootools.net"</span> title=<span class="st0">"mootools homepage"</span> <span class="kw2">class</span>=<span class="st0">"thisisatooltip"</span> /&gt;
</pre>

<h4>JavaScript</h4>

<pre class="javascript"><span class="kw2">var</span> myTips = <span class="kw2">new</span> Tips<span class="br0">(</span><span class="st0">'.thisisatooltip'</span><span class="br0">)</span>;
</pre>

<h2 id="Tips:show"><a href="#Tips:show">Tips Event: show</a></h2>

<ul class="description">
<li>(<em>function</em>) Fires when the Tip is starting to show and by default sets the tip visible.</li>
</ul>
<h3>Signature</h3>

<pre class="javascript">onShow<span class="br0">(</span>tip<span class="br0">)</span>
</pre>

<h3>Arguments</h3>

<ol>
<li>tip - (<em>element</em>) The tip element. Useful if you want to apply effects to it.</li>
<li>el - (<em>element</em>) The element on which the tip is based on.</li>
</ol>
<h3>Example</h3>

<pre class="javascript">myTips.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'show'</span>, <span class="kw2">function</span><span class="br0">(</span>tip, el<span class="br0">)</span><span class="br0">{</span>
    tip.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'someCustomClassBecauseTheTipIsVisible'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Note</h3>

<p>To override the default tip show behavior, you must either declare the onShow event in the options on initialization or remove the onShow event from the class yourself. Example:</p>

<pre class="javascript">    <span class="kw2">var</span> myTips = <span class="kw2">new</span> Tips<span class="br0">(</span><span class="st0">'.thisisatooltip'</span>, <span class="br0">{</span>
        onShow: <span class="kw2">function</span><span class="br0">(</span>tip, el<span class="br0">)</span><span class="br0">{</span>
            tip.<span class="me1">setStyles</span><span class="br0">(</span><span class="br0">{</span>
                visibility: <span class="st0">'hidden'</span>
                display: <span class="st0">'block'</span>
            <span class="br0">}</span><span class="br0">)</span>.<span class="me1">fade</span><span class="br0">(</span><span class="st0">'in'</span><span class="br0">)</span>;
        <span class="br0">}</span>
    <span class="br0">}</span><span class="br0">)</span>;
    <span class="co1">//if you want to add this after init</span>
    myTips.<span class="me1">removeEvents</span><span class="br0">(</span><span class="st0">'show'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'show'</span>, <span class="kw2">function</span><span class="br0">(</span>tip, el<span class="br0">)</span><span class="br0">{</span>
        tip.<span class="me1">setStyles</span><span class="br0">(</span><span class="br0">{</span>
            visibility: <span class="st0">'hidden'</span>
            display: <span class="st0">'block'</span>
        <span class="br0">}</span><span class="br0">)</span>.<span class="me1">fade</span><span class="br0">(</span><span class="st0">'in'</span><span class="br0">)</span>;
    <span class="br0">}</span><span class="br0">)</span>;
</pre>

<h2 id="Tips:hide"><a href="#Tips:hide">Tips Event: hide</a></h2>

<ul class="description">
<li>(<em>function</em>) Fires when the Tip is starting to hide and by default sets the tip hidden.</li>
</ul>
<h3>Signature</h3>

<pre class="javascript">onHide<span class="br0">(</span>tip<span class="br0">)</span>
</pre>

<h3>Arguments</h3>

<ol>
<li>tip - (<em>element</em>) The tip element. Useful if you want to apply effects to it.</li>
<li>el - (<em>element</em>) The element on which the tip is based on.</li>
</ol>
<h3>Example</h3>

<pre class="javascript">myTips.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'hide'</span>, <span class="kw2">function</span><span class="br0">(</span>tip, el<span class="br0">)</span><span class="br0">{</span>
    tip.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'someCustomClassBecauseTheTipIsVisible'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Note</h3>

<p>To override the default tip hide behavior, you must either declare the onHide event in the options on initialization or remove the onHide event from the class yourself. Example:</p>

<pre class="javascript">    <span class="kw2">var</span> myTips = <span class="kw2">new</span> Tips<span class="br0">(</span><span class="st0">'.thisisatooltip'</span>, <span class="br0">{</span>
        onHide: <span class="kw2">function</span><span class="br0">(</span>tip, el<span class="br0">)</span><span class="br0">{</span>
            tip.<span class="me1">fade</span><span class="br0">(</span><span class="st0">'out'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tween'</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
                tip.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'display'</span>, <span class="st0">'none'</span><span class="br0">)</span>;
            <span class="br0">}</span><span class="br0">)</span>;
        <span class="br0">}</span>
    <span class="br0">}</span><span class="br0">)</span>;
    <span class="co1">//if you want to add this after init</span>
    myTips.<span class="me1">removeEvents</span><span class="br0">(</span><span class="st0">'hide'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'hide'</span>, <span class="kw2">function</span><span class="br0">(</span>tip, el<span class="br0">)</span><span class="br0">{</span>
        tip.<span class="me1">fade</span><span class="br0">(</span><span class="st0">'out'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tween'</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
            tip.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'display'</span>, <span class="st0">'none'</span><span class="br0">)</span>;
        <span class="br0">}</span><span class="br0">)</span>;
    <span class="br0">}</span><span class="br0">)</span>;
</pre>

<h2 id="Tips:setTitle"><a href="#Tips:setTitle">Tips Method: setTitle</a></h2>

<p class="description">Updates the tip title. Note that the title is re-assigned when the tip is hidden and displayed again; this method allows you to change it after it's visible.</p>

<h3>Syntax</h3>

<pre class="javascript">myTips.<span class="me1">setTitle</span><span class="br0">(</span>title<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>title - (<em>mixed</em>) A collection of elements, a single Element, or a string of text. The former two being adopted into the tip the latter being set as its HTML.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This Tips instance.</li>
</ul>
<h3>Example</h3>

<pre class="javascript">myTips.<span class="me1">setTitle</span><span class="br0">(</span><span class="st0">"I'm the new title!"</span><span class="br0">)</span>;
</pre>

<h2 id="Tips:setText"><a href="#Tips:setText">Tips Method: setText</a></h2>

<p class="description">Updates the tip text. Note that the text is re-assigned when the tip is hidden and displayed again; this method allows you to change it after it's visible.</p>

<h3>Syntax</h3>

<pre class="javascript">myTips.<span class="me1">setText</span><span class="br0">(</span>text<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>text - (<em>mixed</em>) A collection of elements, a single Element, or a string of text. The former two being adopted into the tip the latter being set as its HTML.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This Tips instance.</li>
</ul>
<h3>Example</h3>

<pre class="javascript">myTips.<span class="me1">setText</span><span class="br0">(</span><span class="st0">"I'm the new body text!"</span><span class="br0">)</span>;
</pre>

<h2 id="Tips:attach"><a href="#Tips:attach">Tips Method: attach</a></h2>

<p class="description">Attaches tooltips to elements. Useful to add more elements to a tips instance.</p>

<h3>Syntax</h3>

<pre class="javascript">myTips.<span class="me1">attach</span><span class="br0">(</span>elements<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>elements - (<em>mixed</em>) A collection of elements, a string Selector, or an Element to apply the tooltips to.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This Tips instance.</li>
</ul>
<h3>Example</h3>

<pre class="javascript">myTips.<span class="me1">attach</span><span class="br0">(</span><span class="st0">'a.thisisatip'</span><span class="br0">)</span>;
</pre>

<h2 id="Tips:detach"><a href="#Tips:detach">Tips Method: detach</a></h2>

<p class="description">Detaches tooltips from elements. Useful to remove elements from a tips instance.</p>

<h3>Syntax</h3>

<pre class="javascript">myTips.<span class="me1">detach</span><span class="br0">(</span>elements<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>elements - (<em>mixed</em>) A collection of elements, a string Selector, or an Element to apply the tooltips to.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This Tips instance.</li>
</ul>
<h3>Example</h3>

<pre class="javascript">myTips.<span class="me1">detach</span><span class="br0">(</span><span class="st0">'a.thisisatip'</span><span class="br0">)</span>;
</pre>

<h2 id="Tips:HTML"><a href="#Tips:HTML">Tips HTML Structure</a></h2>

<pre class="javascript">&lt;div <span class="kw2">class</span>=<span class="st0">"options.className"</span>&gt; <span class="co1">//the className you pass in options will be assigned here.</span>
    &lt;div <span class="kw2">class</span>=<span class="st0">"tip-top"</span>&gt;&lt;/div&gt; <span class="co1">//useful for styling</span>
&nbsp;
    &lt;div <span class="kw2">class</span>=<span class="st0">"tip"</span>&gt;
&nbsp;
        &lt;div <span class="kw2">class</span>=<span class="st0">"tip-title"</span>&gt;&lt;/div&gt;
&nbsp;
        &lt;div <span class="kw2">class</span>=<span class="st0">"tip-text"</span>&gt;&lt;/div&gt;
&nbsp;
    &lt;/div&gt;
&nbsp;
    &lt;div <span class="kw2">class</span>=<span class="st0">"tip-bottom"</span>&gt;&lt;/div&gt; <span class="co1">//useful for styling</span>
&lt;/div&gt;
</pre>

<h2 id="Tips:Storage"><a href="#Tips:Storage">Tips with storage</a></h2>

<p class="description">You can also assign tips titles and contents via <a href="../../core/Element/Element.html#ElementStorage">Element Storage</a>.</p>

<h3>Example</h3>

<h4>HTML</h4>

<pre class="javascript">&lt;a id=<span class="st0">"tip1"</span> href=<span class="st0">"http://mootools.net"</span> title=<span class="st0">"mootools homepage"</span> <span class="kw2">class</span>=<span class="st0">"thisisatooltip"</span> /&gt;
</pre>

<h4>JavaScript</h4>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'tip1'</span><span class="br0">)</span>.<span class="me1">store</span><span class="br0">(</span><span class="st0">'tip:title'</span>, <span class="st0">'custom title for tip 1'</span><span class="br0">)</span>;
&nbsp;
$<span class="br0">(</span><span class="st0">'tip1'</span><span class="br0">)</span>.<span class="me1">store</span><span class="br0">(</span><span class="st0">'tip:text'</span>, <span class="st0">'custom text for tip 1'</span><span class="br0">)</span>;
</pre>

<h3>Note</h3>

<p>If you use tips storage you can use elements and / or html as tips title and text.</p>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
